<template>
  <section class="order-panel-container">
    <template v-if="orders.info.length">
      <OrderUnit v-for="order in orders.info" :order="order"></OrderUnit>
    </template>
    <n-empty v-else class="empty" description="订单里啥也没有">
      <template #extra>
        <!-- <n-button size="small">看看别的</n-button> -->
      </template>
    </n-empty>
  </section>
</template>
<script setup lang="ts">
import { getOrderService } from '../../api/orderApi';
import OrderUnit from './OrderUnit.vue';
import { reactive } from '@vue/reactivity';

const orders = reactive({
  info: [],
});
getOrderService().then((res: any) => {
  orders.info = res.data || [];
});
</script>
<style scoped>
.order-panel-container {
  margin-top: 20px;
  background-color: #fff;
  padding: 20px;
  box-sizing: border-box;
  margin-bottom: 40px;
}
.empty {
  height: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
}
</style>